<template>
  <div class="content">
    <div class="warps">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">城市</el-menu-item>

        <el-menu-item index="2">栏目</el-menu-item>
        <el-menu-item index="3">数据字典</el-menu-item>
        <el-menu-item index="4">cpm</el-menu-item>
        <el-menu-item index="5">成本</el-menu-item>
      </el-menu>
      <div class="line" v-if="activeIndex==1">
        <div class="linetop">
          <el-button type="primary">
            <i class="el-icon-plus"></i>新建用户
          </el-button>
          <div class="topright">
            <el-button type="text">导入</el-button>
            <el-button type="text">编辑</el-button>
          </div>
        </div>
        <div class="linelist">
          <el-table :data="list"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="name" label="区域" align="center" width="150"></el-table-column>
            <el-table-column prop="name" align="center" label="省份" width="120"></el-table-column>
            <el-table-column prop="name" align="center" label="城市" width="120"></el-table-column>
            <el-table-column prop="city" align="center" label="经度" width="120"></el-table-column>
            <el-table-column prop="address" align="center" label="纬度" width="120"></el-table-column>
            <el-table-column prop="zip" label="GDP（亿）" align="center" width="120"></el-table-column>
            <el-table-column prop="zip" label="人口数（万）" align="center" width="120"></el-table-column>
            <el-table-column prop="zip" label="创建日期" align="center" width="120"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="a(scope.row)" type="text" size="small">设置</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            ></el-pagination>
          </div>
        </div>
      </div>
      <div class="line" v-if="activeIndex==2">
        <div class="linetop">
          <el-button type="primary">
            <i class="el-icon-plus"></i>新建栏目
          </el-button>
          <div class="topright">
            <el-button type="text">导入</el-button>
          </div>
        </div>
        <div class="linelist">
          <div class="listitem">
            <div class="listleft">
              <div class="row1">
                <div class="column1">媒介</div>
                <div class="column2"></div>
                <div class="column1">频道</div>
                <div class="column2">cctv1</div>
                <div class="column1">栏目</div>
                <div class="column2" style="flex:1">cctv1</div>
              </div>
              <div class="row1">
                <div class="column1">区域</div>
                <div class="column2"></div>
                <div class="column1">省份</div>
                <div class="column2">cctv1</div>
                <div class="column1">城市</div>
                <div class="column2">cctv1</div>
                <div class="column1">Reach</div>
                <div class="column3">cctv1</div>
              </div>
              <div class="row1">
                <div class="column1">说明</div>
                <div class="column2" style="flex:1;">cctv1</div>

                <div class="column1">Reach</div>
                <div class="column3">cctv1</div>
              </div>
              <div class="row2">
                <div class="colum4">受众特征</div>
                <div class="colum5">
                  <div class="row3">
                    <div class="column1">性别</div>
                    <div class="colum6">
                      <div class="colum7">男：娃哈哈</div>
                      <div class="colum7">男：娃哈哈</div>
                    </div>
                  </div>
                  <div class="row3">
                    <div class="column1">年龄</div>
                    <div class="colum6">
                      <div class="colum7" style="width:25%;">20岁以下：</div>
                      <div class="colum7" style="width:25%;">20-40：</div>
                      <div class="colum7" style="width:25%;">40-60：</div>
                      <div class="colum7" style="width:25%;">60以上：</div>
                    </div>
                  </div>
                  <div class="row3">
                    <div class="column1">教育程度</div>
                    <div class="colum6">
                      <div class="colum7">初中及以下：</div>
                      <div class="colum7">大学本科：</div>
                      <div class="colum7">其他：</div>
                    </div>
                  </div>
                  <div class="row3">
                    <div class="column1">职业</div>
                    <div class="colum6">
                      <div class="colum7">政府/企业/事业单位：</div>
                      <div class="colum7">教育工作者：</div>
                      <div class="colum7">其他：</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="listright">
              <el-button type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
            </div>
          </div>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            ></el-pagination>
          </div>
        </div>
      </div>
      <div class="line" v-if="activeIndex==3">
        <div class="linetop">
          <el-button type="primary" @click.native="clickdictionary">
            <i class="el-icon-plus"></i>新建字典
          </el-button>
          <div class="topright">
            <!-- <el-button type="text">导入</el-button> -->
            <!-- <el-button type="text">编辑</el-button> -->
          </div>
        </div>
        <div class="linelist">
          <el-table :data="DictionariesList"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="get_pid.class" label="类型" align="center" ></el-table-column>
            <el-table-column prop="name" align="center" label="名称" ></el-table-column>
            <el-table-column prop="remark" align="center" label="说明"></el-table-column>
            <el-table-column prop="get_medium.name" align="center" label="适用媒介"></el-table-column>
            <el-table-column prop="created_at" align="center" label="创建时间" ></el-table-column>

            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-button @click="edit_zd(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="b(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="setDictionariesPAGE"
              :current-page.sync="DictionariesPage"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="DictionariesTotal"
            ></el-pagination>
          </div>
        </div>
      </div>
      <div class="line" v-if="activeIndex==4">
        <div class="linetop">
          <el-button type="primary" @click.native="addcpmfunction">
            <i class="el-icon-plus"></i>添加
          </el-button>
          <div class="topright">
            <!-- <el-button type="text">导入</el-button> -->
            <!-- <el-button type="text">编辑</el-button> -->
          </div>
        </div>
        <div class="linelist">
          <el-table
            :data="CpmList"
            border
             :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
            style="width: 100%"
            tooltip-effect="dark"
            @selection-change="handleCpm"
          >
            <el-table-column type="selection" align="center" width="50"></el-table-column>
            <el-table-column prop="channel" label="频道" align="center" width="200"></el-table-column>
            <el-table-column prop="get_class.name" align="center" label="类型"></el-table-column>
            <el-table-column prop="cpm" align="center" label="cpm"></el-table-column>

            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-button @click="cpmedit(scope.row)" type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block btom_btom">
            <el-button type="text" @click.native="delcpm_isok">删除</el-button>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="SETCPMPAGE"
              :current-page.sync="CpmPage"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="CpmTotal"
            ></el-pagination>
          </div>
        </div>
      </div>
      <div class="line" v-if="activeIndex==5">
        <div class="linetop">
          <el-button type="primary" @click.native="clickCost">
            <i class="el-icon-plus"></i>添加
          </el-button>
          <div class="topright">
            <!-- <el-button type="text">导入</el-button> -->
            <!-- <el-button type="text">编辑</el-button> -->
          </div>
        </div>
        <div class="linelist">
          <el-table
            :data="CostList"
            border
            tooltip-effect="dark"
             :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
            @selection-change="handleCost"
            style="width: 100%"
          >
            <el-table-column type="selection" label align="center" width="50"></el-table-column>
            <el-table-column prop="get_channel.channel" label="频道" align="center" width="200"></el-table-column>
            <el-table-column prop="get_media.media_name" align="center" label="媒介"></el-table-column>
            <el-table-column prop="cost_money" align="center" label="成本(万元）"></el-table-column>

            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-button @click="editCost(scope.row)" type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block btom_btom">
            <el-button type="text" @click.native="delCost_isok">删除</el-button>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="setCostpage"
              :current-page.sync="CostPage"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="CostTotal"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- dictionary -->
    <div class="prop" v-show="dictionary">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:650px;height:350px;">
        <div class="propheader">
          新建字典
          <el-button type="text" class="close1" @click="setdictionary">关闭</el-button>
          <!-- <p class="close1" @click="setdictionary">关闭</p> -->
        </div>
        <div class="contenthint">
          <div class="itemhiden">
            <div class="itemone">
              <div class="onename">类型</div>
              <el-select v-model="EditDictionaries.pid" filterable   style="width:150px;" placeholder="请选择">
                <el-option
                  v-for="item in DictionariesObj.class"
                  :key="item.id"
                  :label="item.class"
                  :value="item.id"
                ></el-option>
              </el-select>
             
            
            </div>
             <div class="itemone" v-if="EditDictionaries.pid=='true'"  style="width:20%">   <el-input style="width:100px;" v-model="EditDictionaries.class"></el-input></div>
            <div class="itemone">
              <div class="onename">适用媒介</div>
              <el-select style="width:150px;" multiple   collapse-tags v-model="EditDictionaries.medium_id" placeholder="请选择">
                <el-option
                  v-for="item in DictionariesObj.medium"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
              <div class="itemone" v-if="judgepositionstatus">
              <div class="onename">适用媒体</div>
              <el-select v-model="EditDictionaries.media_id" filterable   style="width:150px;" placeholder="请选择">
                <el-option
                  v-for="item in mediaList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
             
            
            </div>
          </div>
          <!-- <div class="addtext">
            <el-button type="text">添加</el-button>
          </div> -->
          <div class="addinput" style="margin-top:20px;" v-for="(item,index) in EditDictionaries.data_array" :key="index">
            <div class="leftname">选项名称:</div>
            <el-input style="width:180px;" v-model="item.name"></el-input>
            <div class="leftname">说明:</div>
            <el-input type="textarea" style="width:200px;margin-right:10px;" v-model="item.remark" :rows="2" placeholder="请输入内容"></el-input>
            <el-button type="text" @click.native="addlist" v-if="EditDictionaries.data_array.length-1==index">添加</el-button>
            <el-button type="text" @click="dellist(index)" v-if="EditDictionaries.data_array.length>1">删除</el-button>
          </div>
        </div>
        <div class="addsave">
          <el-button type="primary" @click.native="Dictionariessave">提交</el-button>
        </div>
      </div>
    </div>
      <div class="prop" v-show="zd_edit">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:400px;height:370px;">
        <div class="propheader">
          编辑数据字典
          <el-button class="close1" type="text" @click.native="setzd_edit">关闭</el-button>
        </div>
        <div class="contenthint" style="height:260px; width:80%;">
         
          <div class="contitem">
            <div class="contname">类型</div>
            <el-select v-model="EditParam.class_id" disabled placeholder="请选择">
                <el-option
                  v-for="item in DictionariesObj.class"
                  :key="item.id"
                  :label="item.class"
                  :value="item.id"
                ></el-option>         
            </el-select>
          </div>
           <div class="contitem">
            <div class="contname">适用媒介</div>
            <el-select v-model="EditParam.medium_id" disabled placeholder="请选择">
              <el-option
                  v-for="item in DictionariesObj.medium"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
            </el-select>
          </div>
           <div class="contitem">
            <div class="contname">选项名称</div>
            <el-input style="width:200px;" v-model="EditParam.name"></el-input>
          </div>
          <div class="contitem">
            <div class="contname">说明</div>
            <el-input style="width:200px;" type="textarea" v-model="EditParam.remark"></el-input>
          </div>
        </div>
        <div class="addsave">
          <el-button type="primary" @click.native="edit_zd_save">提交</el-button>
        </div>
      </div>
    </div>
    <div class="prop" v-show="cpm">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:400px;height:330px;">
        <div class="propheader">
          {{CPMtype==1?'添加':'编辑'}}
          <el-button class="close1" @click.native="setcpm" type="text">关闭</el-button>
        </div>
        <div class="contenthint" style="height:200px; width:95%;">
          <div class="contitem">
            <div class="contname">频道</div>
            <el-input style="width:250px;" v-model="cpmparam.channel"></el-input>
          </div>
          <div class="contitem">
            <div class="contname">cpm</div>
            <el-input style="width:250px;" v-model="cpmparam.cpm"></el-input>
          </div>
          <div class="contitem">
            <div class="contname">频道类型</div>
            <el-select v-model="cpmparam.class_id" placeholder="请选择">
              <el-option
                v-for="item in channelTypelist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="addsave">
          <el-button type="primary" @click.native="editCpm">提交</el-button>
        </div>
      </div>
    </div>
    <!-- 成本添加与编辑 TCO-->
    <div class="prop" v-show="TCO">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:500px;height:330px;">
        <div class="propheader">
          {{CostType==1?'添加成本':'编辑成本'}}
          <el-button class="close1" type="text" @click.native="settco">关闭</el-button>
        </div>
        <div class="contenthint" style="height:200px;">
          
          <div class="contitem">
            <div class="contname">媒介:</div>
            <el-select v-model="CostParam.media_id" filterable  placeholder="请选择">
              <el-option
                v-for="item in CostMedia"
                :key="item.id"
                :label="item.media_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="contitem">
            <div class="contname">频道:</div>
            <el-select v-model="CostParam.channel_id" filterable  placeholder="请选择">
              <el-option
                v-for="item in CostChannel"
                :key="item.id"
                :label="item.channel"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="contitem">
            <div class="contname">成本（万元）</div>
            <el-input style="width:250px;" type="number" v-model="CostParam.cost_money"></el-input>
          </div>
        </div>
        <div class="addsave">
          <el-button type="primary" @click.native="Costsave">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getCpmList,
  addCpmList,
  editcpm,
  getCOSETlist,
  addCOSETlist,
  getDictionaries,
  getarr,
  addarray,
  arrayinfo,
  getmedia_select,
  editarrayinfo
} from "../../api/Salesman.js";
import {SETDATE} from '../../api/System.js'
export default {
  data() {
    return {
      activeIndex: "3",
      currentPage1: 1,
      list: [
        { name: "xxxx" },
        { name: "xxxx" },
        { name: "xxxx" },
        { name: "xxxx" }
      ],
      options: [
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      dictionary: false,
      cpm: false,
      TCO: false,
      //cpm列表
      CpmTotal: 0,
      CpmPage: 1,
      CpmList: [],
      CPMtype: 1,
      channelTypelist: [],
      CPMid: "",
      cpmparam: {
        channel: "",
        class_id: "",
        cpm: ""
      },
      delCpm: [],
      //成本参数
      CostTotal: 0,
      CostPage: 1,
      CostList: [],
      CostType: 1,
      CostParam: {
        media_id: "",
        channel_id: "",
        cost_money: ""
      },
      CostId:'',
      delCostlist:[],
      //频道列表
      CostChannel:[],
      //媒体列表
      CostMedia:[],
      //数据字典参数
      DictionariesId:'',
      DictionariesList:[],
      DictionariesPage:1,
      DictionariesTotal:0,
      dictionaryTYPE:1,
      DictionariesObj:{},
      zd_edit:false,
      EditDictionaries:{
        pid:'',
        is_add:'',
        medium_id	:[],
        media_id:'',
        data_array:[
          {name:'',remark:''}
        ]
      },
      EditParam:{
      class_id:'',
      medium_id:'',
      remark:'',
      name:''
      },
      mediaList:[],
      judgepositionstatus:false
    };
  },
  created() {
    //cpm
    this.getcpm();
    this.getchanneltype();
    //成本
    this.getcost();
    this.getCostmedie();
    //数据字典
    this.getDictionariesList()
    this.getaddparam()
    //  this.getmedia()
  },
  methods: {
    //获取媒体列表
    getmedia(data){
     getmedia_select(data).then(res=>{
       if(res.code==200){
         this.mediaList=res.data
       }
     })
    },
    //编辑字典保存
    edit_zd_save(){
     if(!this.EditParam.name){
        this.$message({
          message:'选项名称不能为空',
          type:'warning'
        })
        return
     }
     let data={
       id:this.DictionariesId,
       data:{
         name:this.EditParam.name,
         remark:this.EditParam.remark,
       }
     }
     editarrayinfo(data).then(res=>{
       if(res.code==200){
           this.$message({
           message:'修改成功',
           type:'success'
         })
         this.DictionariesPage=1
         this.getDictionariesList()
         this.setzd_edit()
       }
     })
    },
    //点击字典
    edit_zd(row){
    this.DictionariesId=row.id
    arrayinfo({id:row.id}).then(res=>{
      if(res.code==200){
        this.EditParam.class_id=res.data.info.pid
        this.EditParam.medium_id=res.data.info.medium_id
        this.EditParam.remark=res.data.info.remark
        this.EditParam.name=res.data.info.name
        this.setzd_edit()
      }
    })
    },
    // //判断节目位置
    // judgeposition(id){
    //    this.DictionariesObj.class.forEach(element => {
    //      if(element.id==id && element.class=='节目/位置'){
    //       //  console.log("xxxxv")
    //       return true
    //      }else{
    //         return false
    //      }
    //    });
    // },
    //编辑字典弹框
  setzd_edit(){
    if(this.zd_edit){
      this.EditParam.class_id=''
      this.EditParam.medium_id=''
      this.EditParam.remark=''
      this.EditParam.name=''
    }
  this.zd_edit=!this.zd_edit
  },
    Dictionariessave(){
         if(!this.EditDictionaries.pid){
          this.$message({
            message:'类型不能为空',
            type:'warning'
          })
          return
        }               
      if(this.EditDictionaries.pid=="true"){
        if(!this.EditDictionaries.class){
          this.$message({
            message:'输入新建类型名称',
            type:'warning'
          })
          return
        }
      }
       
      var falg=true
      this.EditDictionaries.data_array.forEach(element => {
        if(!element.name){
          falg=false
          return
        }
      });
      if(!falg){
         this.$message({
            message:'选项名称不能为空',
            type:'warning'
          })
          return
      }
     var data={
     is_add:this.EditDictionaries.pid=="true"?1:'0',
     class:this.EditDictionaries.pid=="true"? this.EditDictionaries.class :'',
     medium_id:this.EditDictionaries.medium_id,
     pid:this.EditDictionaries.pid=="true"?'':this.EditDictionaries.pid,
    data_array:this.EditDictionaries.data_array,
    media_id:this.judgepositionstatus? this.EditDictionaries.media_id :'',
     }
    //  this.judgeposition(this.EditDictionaries.pid)
    //  return
     addarray(data).then(res=>{
       if(res.code==200){
         this.$message({
           message:'添加成功',
           type:'success'
         })
         this.DictionariesPage=1
         this.getDictionariesList()
         //从新获取下拉列表
         this.getaddparam()
         this.setdictionary()
       }
     })
    },
    addlist(){
     this.EditDictionaries.data_array.push( {name:'',remark:''})
    },
    dellist(index){
         this.EditDictionaries.data_array.splice(index,1)
    },
    //获取添加字段时的下拉列表
    getaddparam(){
      getarr().then(res=>{
        if(res.code==200){
          this.DictionariesObj=res.data
          this.DictionariesObj.class.push({class:'新增',id:'true'})
        }
      })
    },
 //点击新建字典
 clickdictionary(){
   this.dictionaryTYPE=1
  this.setdictionary()
 },

    //获取数据字典列表
    getDictionariesList(){
      let data={
        per:10,
        page:this.DictionariesPage
      }
     getDictionaries(data).then(res=>{
       if(res.code==200){
         this.DictionariesList=res.data.data
         this.DictionariesPage=res.data.current_page
         this.DictionariesTotal=res.data.total
         this.DictionariesList.forEach(element => {
           element.created_at=SETDATE(element.created_at)
         });
       }
     })
    },
    //修改数据字典页数
    setDictionariesPAGE(e){
     this.DictionariesPage=e
     this.getDictionariesList()
    },
    //点击编辑成本
    editCost(row){
     this.CostId=row.id
    //  console.log(row)
     this.CostParam.media_id=row.media_id?row.media_id:''
     this.CostParam.channel_id=row.channel_id?row.channel_id:''
     this.CostParam.cost_money=row.cost_money
      this.CostType=2
      this.settco()
    },
    //成本保存
    Costsave(){
      if(!this.CostParam.channel_id){
        this.$message({
          message:'请选择频道',
          type:'warning'
        })
        return
      }
       if(!this.CostParam.media_id){
        this.$message({
          message:'请选择媒介',
          type:'warning'
        })
        return
      }
       if(!this.CostParam.cost_money){
        this.$message({
          message:'成本不能为空',
          type:'warning'
        })
        return
      }
    // console.log(this.CostParam)
    if(this.CostType==1){
  addCOSETlist(this.CostParam).then(res=>{
      // console.log(res)
      if(res.code==200){
        this.$message({
          message:'成本添加成功',
          type:'success'
        })
        this.CostPage=1
        this.getcost()
       this.settco()
      }
    })
    }else{
      let data={...this.CostParam}
      data.id=this.CostId
      data.type=2
      data.status=2
      editcpm(data).then(res=>{
        if(res.code==200){
             this.$message({
          message:'成本修改成功',
          type:'success'
        })
      
        this.CostPage=1
        this.getcost()
       this.settco()
        }
      })
    }
  
    },
    //点击添加成本
    clickCost() {
      this.CostType = 1;
      this.settco();
    },
    //获取成本中的频道媒介
    getCostmedie() {
      getCOSETlist({ type: 2 }).then(res => {
        // console.log(res);
        if(res.code==200){
          this.CostMedia=res.data.media
          this.CostChannel=res.data.channel
        }
      });
    },
    //获取成本
    getcost() {
      let data = {
        per: 10,
        page: this.CostPage,
        type: 1
      };
      getCOSETlist(data).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.CostPage = res.data.current_page;
          this.CostList = res.data.data;
          this.CostTotal = res.data.total;
        }
      });
    },
    setCostpage(e) {
      this.CostPage = e;
      this.getcost();
    },
    //成本多选方法
    handleCost(e) {
      // console.log(e);
      this.delCostlist=[]
      e.forEach(element => {
        this.delCostlist.push(element.id)
      });
    },
    //点击编辑cpm
    cpmedit(scop) {
      this.CPMtype = 2;
      this.CPMid = scop.id;
      this.cpmparam.channel = scop.channel;
      this.cpmparam.class_id = scop.class_id;
      this.cpmparam.cpm = scop.cpm;
      this.setcpm();
    },
    //cpm多选变化
    handleCpm(e) {
      // console.log(e);
      this.delCpm = [];
      e.forEach(element => {
        this.delCpm.push(element.id);
      });
    },
    //删除成本
    delCost_isok(){
      // console.log(this.delCostlist)
      if(this.delCostlist.length<1){
        this.$message({
          message:'请选择删除对象',
          type:'warning'
        })
        return
      }
     this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var data = {
            type: 2,
            status: 1,
            ids: this.delCostlist
          };
          editcpm(data).then(res => {
            // console.log(res);
            if (res.code == 200) {
              this.delCostlist = [];
              this.CostTotal = 0;
              this.CostPage = 1;
              this.CostList = [];
              this.getcost();
              this.$message({
                message: "删除成功",
                type: "success"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //删除cpm
    delcpm_isok() {
      if (this.delCpm.length < 1) {
        this.$message({
          message: "请选择cpm",
          type: "warning"
        });
        return;
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var data = {
            type: 1,
            status: 1,
            ids: this.delCpm
          };
          editcpm(data).then(res => {
            // console.log(res);
            if (res.code == 200) {
              this.delCpm = [];
              this.CpmTotal = 0;
              this.CpmPage = 1;
              this.CpmList = [];
              this.getcpm();
              this.$message({
                message: "删除成功",
                type: "success"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //cpm点击保存
    editCpm() {
      if (!this.cpmparam.channel) {
        this.$message({
          message: "频道不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.cpmparam.cpm) {
        this.$message({
          message: "cpm不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.cpmparam.class_id) {
        this.$message({
          message: "频道类型不能为空",
          type: "warning"
        });
        return;
      }
      // console.log(this.cpmparam);
      if (this.CPMtype == 1) {
        addCpmList(this.cpmparam).then(res => {
          if (res.code == 200) {
            this.$message({
              message: "cpm添加成功",
              type: "success"
            });
            this.setcpm();
            this.CpmPage = 1;
            this.CpmTotal = 0;
            this.getCpmList();
          }
        });
      } else {
        var data = { ...this.cpmparam };
        data.type = 1;
        data.status = 2;
        data.id = this.CPMid;
        // console.log(data);
        editcpm(data).then(res => {
          if (res.code == 200) {
            this.$message({
              message: "cpm修改成功",
              type: "success"
            });

            this.CpmPage = 1;
            this.CpmTotal = 0;
            this.getcpm();
            this.setcpm();
          }
        });
      }
    },
    //点击添加cpm
    addcpmfunction() {
      this.CPMtype = 1;
      this.setcpm();
    },
    //获取频道类型
    getchanneltype() {
      getCpmList({ type: 2 }).then(res => {
        if (res.code == 200) {
          // console.log(res);
          this.channelTypelist = res.data;
        }
      });
    },
    //获取cpm列表
    getcpm() {
      let data = {
        page: this.CpmPage,
        per: 10,
        type: 1
      };
      getCpmList(data).then(res => {
        if (res.code == 200) {
          this.CpmList = res.data.data;
          this.CpmTotal = res.data.total;
          this.CpmPage = res.data.current_page;
        }
      });
    },
    //cpm页数改变
    SETCPMPAGE(e) {
      this.CpmPage = e;
      this.getcpm();
    },
    setcpm() {
      if (this.cpm) {
        this.cpmparam.channel = "";
        this.cpmparam.cpm = "";
        this.cpmparam.class_id = "";
      }
      this.cpm = !this.cpm;
    },
    settco() {
      if(this.TCO){
        this.CostParam.channel_id=''
        this.CostParam.media_id=''
        this.CostParam.cost_money=''
      }
      this.TCO = !this.TCO;
    },
    setdictionary() {
      if(this.dictionary){
        var obj={
        pid:'',
        is_add:'',
        media_id:'',
        medium_id	:'',
        data_array:[
          {name:'',remark:''}
        ]
      }
      this.EditDictionaries=obj
      }
      this.dictionary = !this.dictionary;
    },
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      // console.log(this.activeIndex);
      this.activeIndex = key;
    },
    handleSizeChange() {
      console.log("xx");
    },
    handleCurrentChange() {
      console.log("....前往多少也");
    }
  },
  computed: {
     
  },
  watch: {
     "EditDictionaries.medium_id": {
      deep: true,
      handler: function(newV, oldV) {
        console.log(this.EditDictionaries.medium_id)
        // this.add_resources();
        if(!this.judgepositionstatus){
         return
        }
        if(this.EditDictionaries.medium_id.length==0){
          return
        }
        this.getmedia({medium_id:this.EditDictionaries.medium_id})
      },
     
  },
  "EditDictionaries.pid": {
      deep: true,
      handler: function(newV, oldV) {
        var flag=false
       this.DictionariesObj.class.forEach(element => {
         if(element.id==this.EditDictionaries.pid && element.class=='节目/位置'){
flag=true
          return
         }
       });
       if(flag){
          this.judgepositionstatus=true

       }else{
          this.judgepositionstatus=false
         
       }
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.warps {
  width: 97%;
  margin: 0 auto;
}
.line {
  .linetop {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .topright {
      display: flex;
      width: 80px;
      justify-content: space-between;
    }
  }
  .linelist {
    width: 100%;
  }
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.warpprop {
  width: 600px;
  height: 450px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .contenthint {
    height: 240px;
    width: 98%;
    overflow-y: auto;
    margin: 0 auto;
    
    .itemhiden {
      width: 100%;
      display: flex;
       flex-wrap: wrap;
      .itemone {
        margin-top: 20px;
        width: 40%;
        display: flex;
        align-items: center;
        .onename {
          width: 90px;
          text-align: center;
        }
      }
    }
    .addtext {
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
      margin-top: 10px;
    }
    .addinput {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      .leftname {
        // width: 130px;
        padding: 0 15px;
        font-size: 14px;
        text-align: center;
      }
    }
    .contitem {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .contname {
        width: 100px;
      }
    }
  }
.contenthint::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  .contenthint::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #535353;
  }
  .contenthint::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #ededed;
  }
  .addsave {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
  }
}
.listitem {
  width: 1100px;
  margin-bottom: 20px;
  // height: 700px;
  margin: 0 auto;
  border: 1px solid rgba(204, 204, 204, 1);
  display: flex;
  .listright {
    width: 80px;
    border-left: 1px solid rgba(204, 204, 204, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    // flex-direction: column;
  }
  .listleft {
    flex: 1;
    font-size: 13px;
    .column1 {
      width: 60px;
      height: 100%;
      background: #add8e6;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .column2 {
      width: 200px;
      height: 100%;
      border-left: 1px solid rgba(204, 204, 204, 1);
      border-right: 1px solid rgba(204, 204, 204, 1);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .column3 {
      width: 178px;
      height: 100%;
      border-left: 1px solid rgba(204, 204, 204, 1);
      border-right: 1px solid rgba(204, 204, 204, 1);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .row1 {
      height: 30px;
      border-bottom: 1px solid rgba(204, 204, 204, 1);
      display: flex;
    }
    .row2 {
      width: 100%;
      height: 180px;
      display: flex;
      .colum4 {
        height: 100%;
        width: 60px;
        background: #add8e6;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        border-bottom: 1px solid rgba(204, 204, 204, 1);
        border-right: 1px solid rgba(204, 204, 204, 1);
      }
      .colum5 {
        flex: 1;
      }
      .row3 {
        height: 45px;
        width: 100%;
        display: flex;
        border-bottom: 1px solid rgba(204, 204, 204, 1);
      }
      .colum6 {
        flex: 1;
        border-right: 1px solid rgba(204, 204, 204, 1);
        display: flex;
      }
      .colum7 {
        width: 33%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.btom_btom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>